<template>
  <view>
    <view class="my-save-list">
      <view class="my-save-item" v-for="(item,index) in goods_save" :key="index">
        <uni-swipe-action-item :right-options="options" @click="onClick(item)" :threshold="0">
          <my-goods :item="item"></my-goods>
        </uni-swipe-action-item>
      </view>

    </view>
    <!-- type改为dialog，变为对话框 -->
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog mode="base" title="真的要取消宝贝收藏吗?" :duration="2000" :before-close="true" @close="close"
        @confirm="confirm"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        //用来暂时存储要删除的收藏的商品
        delGood: {},

        options: [{
          text: '删除',
          style: {
            backgroundColor: '#c00000'
          }
        }],


      };
    },
    methods: {
      ...mapMutations('goods_save', ['deleteGoods']),

      //滑动点击事件
      onClick(item) {
        this.delGood = item
        //展示弹出层
        this.$refs.popup.open()
      },
      //关闭弹窗
      close() {
        this.$refs.popup.close()
      },
      //点击确认
      confirm() {
        //给vuex删除商品
        this.deleteGoods(this.delGood)
        this.$refs.popup.close()
      }
    },

    computed: {
      ...mapState('goods_save', ['goods_save'])
    }
  }
</script>

<style lang="scss">
  .my-save-list {
    margin: 0 10px;

    .my-save-item {
      margin: 10px 0;
    }
  }
</style>
